<template>
	<view class="search_music">
		<uni-search-bar @input="handleClick"
										v-model="searchValue"
										@cancel="handleCancel"
										@confirm="handleConfirm"
										cancelButton="always"
										radius="20"></uni-search-bar>
		<scroll-view :scroll-y="true">
			<block v-if="searchValue === '' && searchSugest.length === 0 && searchResult.length === 0">
				<view class="hot-suggest">
					<view class="hot-suggest-title">热门搜索</view>
					<view class="hot-suggest-content">
						<block v-for="item in hotSuggest" :key="item.first">
							<view class="hot-suggest-item" @click="handleHotSearch(item.first)">{{item.first}}</view>
						</block>
					</view>
				</view>
			</block>
			<block v-else-if="searchResult.length === 0">
				<view class="search-suggest">
					<view class="search-suggest-title">搜索"{{searchValue}}"</view>
					<view class="search-suggest-content">
						<block v-for="item in searchSugest" :key="item.keyword">
							<view class="search-suggest-item" @click="handleSearchItem(item.keyword)">
								<image src="../../static/search_icon.png" mode="widthFix"></image>
								<view class="text">{{item.keyword}}</view>
							</view>
						</block>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="search-result">
					<view class="search-result-title">最佳匹配</view>
					<view class="search-result-content">
						<block v-for="(item,index) in searchResult" :key="item.id">
							<view @click="handleSongClick(item.id)">
								<song-item :index="index"
													 :singer="item.artists[0].name"
													 :songName="item.name"
													 :id="item.id"/>
							</view>
						</block>
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	import songItem from '../../components/song-item/song-item.vue'
	import { getHotSuggest, 
					getSearchSuggest, 
					getSearchResult } from '../../service/music_api.js'
	import debounce from '../../util/debounce.js'
	
	const searchDebounce = debounce(getSearchSuggest)
	
	export default {
		components: {
			songItem
		},
		data() {
			return {
				searchValue: '',
				hotSuggest: [],
				searchSugest: [],
				searchResult: []
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData(id){
				getHotSuggest().then(res =>{
					this.hotSuggest = res.data.result.hots
				})
			},
			handleClick(event) {
				if(this.searchValue === '') return
				searchDebounce(event).then(res =>{
					this.searchSugest = res.data.result.allMatch
				})
			},
			handleCancel() {
				this.searchSugest = []
				this.searchResult = []
			},
			handleConfirm() {
				if(this.searchValue === '') return
				this.getSearch(this.searchValue)
			},
			handleSearchItem(keywords) {
				this.getSearch(keywords)
			},
			handleHotSearch(keywords) {
				this.getSearch(keywords)
			},
			getSearch(keywords) {
				getSearchResult(keywords).then(res =>{
					this.searchResult = res.data.result.songs
				})
			},
			handleSongClick(id) {
				uni.navigateTo({
					url: '../music_player/music_player?id='+id
				})
			}
		}
	}
</script>

<style scoped>
	.search_music {
		width: 100vw;
	}
	.hot-suggest-content{
		display: flex;
		flex-wrap: wrap;
	}
	.hot-suggest-title {
		font-size: 36rpx;
		font-weight: bold;
		padding: 10rpx 20rpx;
		/* color: #18BC37; */
	}
	.hot-suggest-item {
		padding: 10rpx 20rpx;
		font-size: 26rpx;
	}
	.hot-suggest-item:first-child{
		color: #18BC37;
	}
	.search-suggest {
		width: 100%;
		padding: 10rpx 0;
	}
	.search-suggest-title {
		font-size: 36rpx;
		font-weight: bold;
		padding: 10rpx 20rpx;
		color: #18BC37;
	}
	.search-suggest-content {
		width: 100%;
	}
	.search-suggest-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.search-suggest-item image {
		width: 8%;
	}
	.search-suggest-item .text {
		width: 87%;
		font-size: 28rpx;
	}
	.search-result {
		width: 100%;
		padding: 0 10rpx;
	}
	.search-result-title {
		font-size: 36rpx;
		font-weight: bold;
		padding: 10rpx 20rpx;
		color: #18BC37;
	}
	.song-item {
		width: 100%;
	}
</style>
